<template>
  <div>
    <van-form @submit="onSubmit" ref="vanform">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        right-icon="question-o"
        @click-right-icon="$toast('请填写用户名用户')"
      />

      <van-field
        v-model="phone"
        type="phone"
        name="phone"
        label="手机号码"
        placeholder="手机号码"
        right-icon="question-o"
        @click-right-icon="$toast('请填写正确的手机号')"
      />
      <!-- :rules="[{ pattern,message: '请填写正确的手机号码' }]" -->
      <van-field
        v-model="password"
        type="password"
        name="validator"
        label="密码"
        placeholder="密码"
        rule="password"
        right-icon="question-o"
        @click-right-icon="$toast('密码要6位以上')"
      />
      <!-- :rules="[{ validator,message: '请填写6位以上的密码' } -->
      <!-- ]" -->
      <van-field
        v-model="password2"
        type="password"
        name="pvalidator"
        label="确认密码"
        placeholder="确认密码"
      />

      <button class="btn" native-type="submit" @click="submit()">注册</button>

      <!-- <van-button native-type="submit">提交</van-button> -->
    </van-form>

    <div class="logo">
      <img src="//img05.yiguoimg.com/d/web/190916/00191/161811/greylogo.png" alt />
    </div>
    <div class="footer">
      <label for="label">
        <input type="checkbox" id="label" v-model="check" />
        我已阅读并同意
        <a>《易果服务协议》</a>和
        <a>《隐私条款》</a>
      </label>
    </div>
  </div>
</template>

<script>
import userApi from "@/api/userApi"; //引入接口
export default {
  data() {
    return {
      password: "",
      username: "",
      password2: "",
      phone: "",
      check: false
      // pattern: /1\d{10}/,

      // show: false
    };
  },
  methods: {
    //按钮提交
    onSubmit(values) {
      console.log("submit", values);
    },

    //注册功能
    submit: function(username, password, phone, password2) {
      const psw = /\d{6}/;
      const poe = /1\d{10}/;

      if (this.username == "") {
        this.$toast("用户名不能为空");
        return false;
      }

      if (this.phone == "") {
        this.$toast("手机号码不能为空");
        return false;
      } else if (!poe.test(this.phone)) {
        this.$toast("请输入正确的电话号码");
        return false;
      } else {
        userApi.checkPhone(this.phone).then(res => {
          // console.log(res)
          if (res.data.flag) {
            //可以注册
          } else {
            //已存在，不可以注册
            this.$toast("手机号码已存在，不可以注册");
          }
        });
      }

      if (this.password == "") {
        this.$toast("密码不能为空");
        return false;
      } else if (!psw.test(this.password)) {
        this.$toast("密码要6位以上");
        return false;
      }

      if (this.password2 == "") {
        this.$toast("确认密码不能为空");
        return false;
      } else if (this.password !== this.password2) {
        this.$toast("俩次密码不同");
        return false;
      }

      if (this.check == false) {
        this.$toast("请阅读并同意服务协议");
        return false;
      }

      try {
        userApi.reg(this.username, this.phone, this.password).then(res => {
          console.log(res.data);
          if (res.data.flag) {
            //注册成功
            this.$toast({
              icon: "success",
              message: "注册成功",
              type: "success"
            });
            //注册成功，跳转到登录页
            this.$router.push({
              path: "/LRcom/login"
            });
          } else {
            //注册失败
            this.$toast({
              icon: "cross",
              message: "注册失败",
              type: "error"
            });
          }
        });
      } catch (error) {
        this.$toast({
          icon: "fail",
          message: "服务器异常",
          type: "error"
        });
      }
    }

    // Reg() {}
  },

  components: {}
};
</script>

<style scoped>
</style>